<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>		 
    <title>仟奇动漫</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div class="wrap">
			<div class="img-container ">
				<img src="img/Title.png" />
				<div class="button"><a>注册/</a><a>登录</a></div>
			</div>	
			<div class="vd-wrap">
			    <video controls id="live-stream" class="vd-default" onvolumechange="" onpause="" poster=""  playsInline webkit-playsinline>
			    </video>						
			</div>
			<div class="vd-wrap">
		      <ul class="tab">
		      	<li><img src="img/share.png"/></li>
		      	<li><a><img src="img/wechat.png"/></a></li>
		      	<li><a><img src="img/weibo.png"/></a></li>
		      	<li><a><img src="img/zone.png"/></a></li>
		      	<li><a><img src="img/qq.png"/></a></li>
		      	<li><a><img src="img/tieba.png"/></a></li>		      		      	
		      </ul>						
			</div>
			<div class="line"><img src="img/line.png"></div>
			<div class="line">
				<div class="title"><img src="img/bg.png"></div>
				<ul class="first">
					<li>活动流程</li>
					<li> 1、参与活动的用户在报名栏填写小时候与现在的梦想，例：<span class="col-green">小时候想成为</span> <span class="col-red">宇航员 ，</span><span class="col-green">现在的梦想是</span><span class="col-red"> 老师</span> 。 </li>
					<li>2、创作的作品为小时候或现在梦想相关的一个<span class="col-green">物件</span>即可，如：<span class="col-green">宇航员——头盔，氧气装置，老师——黑板、课本等。</span></li>				
				</ul>
				<ul>
					<li>作品细则</li>
					<li>1、参赛作品规格：正方形（建议1134x1134像素），大小不超过2MB</li>
					<li>2、作品形式：不限于纸绘（拍摄或扫描高清图片）、板绘、线稿、彩稿。</li>
					<li>3、活动投稿/投票时间：2018年6月30日0时——7月30日24时</li>
					<li>4、注意事项：上传作品需为自主原创作品，且符合以上相关的创作规范。请勿带有商业推广意图的广告内容、不和谐等画面元素。禁止出现任何与活动主题无关的信息，如网址链接、二维码、qq号等。</li>
					<li>5、如有问题请在微信搜索公众号“仟奇change”，留言回复：活动+问题。</li>
					<li>6、本活动最终解释权归仟奇动漫所有。</li>
				</ul>	
				<ul class="last">
					<li>评分规则</li>
					<li>·活动期间每位用户每日获得<span class="col-green">10</span>张投票票数，当天不能给已投票作品再次进行投票且不能取消已点赞的作品。</li>
					<li>·获奖名次为最终获得点赞数的排名。</li>
				</ul>
				<div class="bouns"><img src="img/bg2.png"></div>
			</div>
			<div class="line"><img src="img/line2.png"></div>
			<div class="line">
				<div class="title"><img src="img/bg3.png"></div>
				<div class="sort"><span>随机排序</span><span>时间排序</span><span>点赞排序</span></div>
			</div>
			<div class="line">
				<div class="container-fluid">
					    <div class="row"> 
						            <div class="col-md-3 col-xs-6 ">
						            	<div class="video-cover">
						            		<div>
						            			<a class="picture">
						            			<img src="img/background_02.png"/>
						            			</a>
						            		</div>
						            		<p>小时候-<span class="col-red">宇航员</span>，现在-<span class="col-green">画师啊啊呵</span></p>
						            		<span class="nickname">阿汤哥</span>						            		
						            		<div class="share-box">
						            			<a class="share-button"><img src="img/share2.png"></a>
						            			<a class="like-button">66666</a>
						            		</div>
						            	</div>
						            </div>					            
						            <div class="col-md-3 col-xs-6 ">
						            	<div class="video-cover">
						            		<div>
						            			<a class="picture">
						            			<img src="img/background_02.png"/>
						            			</a>
						            		</div>
						            		<p>小时候-<span class="col-red">宇航员</span>，现在-<span class="col-green">画师啊啊呵</span></p>
						            		<span class="nickname">阿汤哥</span>						            		
						            		<div class="share-box">
						            			<a class="share-button"><img src="img/share2.png"></a>
						            			<a class="like-button">66666</a>
						            		</div>
						            	</div>
						            </div>	
						            <div class="col-md-3 col-xs-6 ">
						            	<div class="video-cover">
						            		<div>
						            			<a class="picture">
						            			<img src="img/background_02.png"/>
						            			</a>
						            		</div>
						            		<p>小时候-<span class="col-red">宇航员</span>，现在-<span class="col-green">画师啊啊呵</span></p>
						            		<span class="nickname">阿汤哥</span>						            		
						            		<div class="share-box">
						            			<a class="share-button"><img src="img/share2.png"></a>
						            			<a class="like-button">66666</a>
						            		</div>
						            	</div>
						            </div>	
						            <div class="col-md-3 col-xs-6 ">
						            	<div class="video-cover">
						            		<div>
						            			<a class="picture">
						            			<img src="img/background_02.png"/>
						            			</a>
						            		</div>
						            		<p>小时候-<span class="col-red">宇航员</span>，现在-<span class="col-green">画师啊啊呵</span></p>
						            		<span class="nickname">阿汤哥</span>						            		
						            		<div class="share-box">
						            			<a class="share-button"><img src="img/share2.png"></a>
						            			<a class="like-button">66666</a>
						            		</div>
						            	</div>
						            </div>	
						            <div class="col-md-3 col-xs-6 ">
						            	<div class="video-cover">
						            		<div>
						            			<a class="picture">
						            			<img src="img/background_02.png"/>
						            			</a>
						            		</div>
						            		<p>小时候-<span class="col-red">宇航员</span>，现在-<span class="col-green">画师啊啊呵</span></p>
						            		<span class="nickname">阿汤哥</span>						            		
						            		<div class="share-box">
						            			<a class="share-button"><img src="img/share2.png"></a>
						            			<a class="like-button">66666</a>
						            		</div>
						            	</div>
						            </div>	
						            <div class="col-md-3 col-xs-6 ">
						            	<div class="video-cover">
						            		<div>
						            			<a class="picture">
						            			<img src="img/background_02.png"/>
						            			</a>
						            		</div>
						            		<p>小时候-<span class="col-red">宇航员</span>，现在-<span class="col-green">画师啊啊呵</span></p>
						            		<span class="nickname">阿汤哥</span>						            		
						            		<div class="share-box">
						            			<a class="share-button"><img src="img/share2.png"></a>
						            			<a class="like-button">66666</a>
						            		</div>
						            	</div>
						            </div>	
						            <div class="col-md-3 col-xs-6 ">
						            	<div class="video-cover">
						            		<div>
						            			<a class="picture">
						            			<img src="img/background_02.png"/>
						            			</a>
						            		</div>
						            		<p>小时候-<span class="col-red">宇航员</span>，现在-<span class="col-green">画师啊啊呵</span></p>
						            		<span class="nickname">阿汤哥</span>						            		
						            		<div class="share-box">
						            			<a class="share-button"><img src="img/share2.png"></a>
						            			<a class="like-button">66666</a>
						            		</div>
						            	</div>
						            </div>	
						            <div class="col-md-3 col-xs-6 ">
						            	<div class="video-cover">
						            		<div>
						            			<a class="picture">
						            			<img src="img/background_02.png"/>
						            			</a>
						            		</div>
						            		<p>小时候-<span class="col-red">宇航员</span>，现在-<span class="col-green">画师啊啊呵</span></p>
						            		<span class="nickname">阿汤哥</span>						            		
						            		<div class="share-box">
						            			<a class="share-button"><img src="img/share2.png"></a>
						            			<a class="like-button">66666</a>
						            		</div>
						            	</div>
						            </div>							            
					    </div>
				</div>
				<div class="container-fluid">
					<div class="mod-page">
						      <a href="#"  class="prePage">上一页</a>
						      <a href="#" class="curPage">1</a>
						      <a href="#">2</a>
						      <a href="#">3</a>
						      <a href="#">...</a>
						      <a href="#">9</a>					      					      					      
						      <a href="#" class="nextPage">下一页</a>					      
					</div>
					<div class="col-green change-page">共9页，跳至 <input type="text"/>页 <span class="jump">跳转</span></div>
				</div>			
			</div>	
			<div class="line"><img src="img/line3.png"></div>
			<div class="line">
				<div class="title"><img src="img/bg4.png"></div>
				<form class="cd-form" method="post" enctype="multipart/form-data">					
					<div class="fieldset">
							<span class="image-replace icon-update">上传作品</span>	
							<input type="file" id="inputFile"/>
							<input id="rightText" type="text" placeholder="图片大小建议1134x1134像素【正方形】，小于2MB" readonly="readonly">							
					</div>
					<div class="fieldset">
							<span class="image-replace icon-author ">作者名称</span>
							<input class="" type="text"  placeholder="不超过10字">						
					</div>	
					<div class="fieldset">	
								<span class="image-replace icon-picture flex1">作品名称</span>
								<input class="left3" type="text"  placeholder="不超过5字">							
								<input class="right3" type="text"  placeholder="不超过5字">											
					</div>						
					<div class="fieldset left5">
						<span class="image-replace icon-link ">联系方式</span>
						<input class="" type="text"  placeholder="QQ号/微信号">
					</div>		
					<div class="fieldset right5">						
							<span class="image-replace icon-phone">手机号码</span>
							<input class="" type="text"  placeholder="11位数">											
					</div>
					<div class="text-c"><input  class="submit-button" type="submit" value="点击提交">		</div>									
				</form>
			</div>
			<div class="line"><div class="fr width5"><img src="img/line4.png" ></div></div>
			<div class="logo"><img src="img/change_2018.png" ></div>			
		</div>
		<div><img src="img/background_02.png"></div>
		<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
		    <div id="innerdiv" style="position:absolute;">
		        <img id="bigimg" style="border:5px solid #fff;" src="" />
		    </div>
		</div>  		
	</body>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script>
	$('.sort span').click(function(){
		$('.sort span').removeClass('focus');
		$(this).addClass('focus');
	});
     $("input[type='file']").change(function(){        
         var sFileName = $(this).val();
         console.log(sFileName)
         $("#rightText").val(sFileName);
     });

    $(".video-cover .picture").click(function(){  
        var _this = $(this).find('img');//将当前的pimg元素作为_this传入函数  
        console.log(_this)
        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);  
    });  

    function imgShow(outerdiv, innerdiv, bigimg, _this){  
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性  
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性  
      
            /*获取当前点击图片的真实大小，并显示弹出层及大图*/  
        $("<img/>").attr("src", src).load(function(){  
            var windowW = $(window).width();//获取当前窗口宽度  
            var windowH = $(window).height();//获取当前窗口高度  
            var realWidth = this.width;//获取图片真实宽度  
            var realHeight = this.height;//获取图片真实高度  
            var imgWidth, imgHeight;  
            var scale = 0.7;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  
              
            if(realHeight>windowH*scale) {//判断图片高度  
                imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放  
                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度  
                if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度  
                    imgWidth = windowW*scale;//再对宽度进行缩放  
                }  
            } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度  
                imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放  
                            imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度  
            } else {//如果图片真实高度和宽度都符合要求，高宽不变  
                imgWidth = realWidth;  
                imgHeight = realHeight;  
            }  
                    $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放  
              
            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距  
            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距  
            $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性  
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  
        });  
          
        $(outerdiv).click(function(){//再次点击淡出消失弹出层  
            $(this).fadeOut("fast");  
        });  
    }  
</script>	
</html>

